<template>
  <view class="app-container">
    <view>选择模式</view>
    <view class="model-view hor-layout-center" @click="naviToPage(editInfo)">
      <image class="model-icon" src="@/static/ic_enter_one.png"/>
      <view class="model-text">一对一</view>
    </view>
    <view class="model-view hor-layout-center" @click="naviToPage(selectClass)">
      <image class="model-icon" src="@/static/ic_enter_all.png"/>
      <view class="model-text">集体课</view>
    </view>
    <!-- 选择班级类型   -->
    <u-popup v-model="showClassSelect" mode="bottom">
      <view class="ver-layout">
        <view class="sheet-title hor-layout-side-center">
          <view class="sheet-title-btn">取消</view>
          <view class="sheet-title-btn">选择班级</view>
          <view class="sheet-title-btn" style="color: #42B4AB" @click="naviToClassPage">确认</view>
        </view>
        <view class="sheet-item u-border-bottom hor-layout-side-center" @click="selectClassType(classType.exist)">
          <view>已有班级</view>
          <u-icon v-if="classType.select===classType.exist" name="checkmark-circle-fill" color="#42B4AB"
                  size="50"></u-icon>
          <view v-else class="sheet-item-select"></view>
        </view>
        <view class="sheet-item hor-layout-side-center" @click="selectClassType(classType.none)">
          <view>创建班级</view>
          <u-icon v-if="classType.select===classType.none" name="checkmark-circle-fill" color="#42B4AB"
                  size="50"></u-icon>
          <view v-else class="sheet-item-select"></view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {editInfo, createClass, selectClass} from "@/router.js"

export default {
  name: "enter",
  data() {
    return {
      editInfo,
      selectClass,
      showClassSelect: false,
      classType: {
        select: 1,
        none: 0,
        exist: 1
      },
      list: [{
        value: '1',
        label: '江'
      },
        {
          value: '2',
          label: '湖'
        }
      ],
    }
  },
  methods: {
    naviToPage(page) {
      this.$u.route({url: page})
    },
    selectClassType(type) {
      this.classType.select = type
    },
    naviToClassPage() {
      let {select, none, exist} = this.classType
      let page = select === none ? createClass : selectClass
      this.$u.route({url: page})
      this.showClassSelect = false
    }
  }
}
</script>

<style scoped>
.model-view {
  background: white;
  border: 1px solid #E5E5E5;
  box-shadow: 1px 1px 1px #e3e3e3;
  border-radius: 26rpx;
  padding: 20rpx 12rpx;
  margin-top: 30rpx;
}

.model-icon {
  width: 85rpx;
  height: 85rpx;
}

.model-text {
  font-size: 34rpx;
  font-weight: bold;
  color: #333333;
  margin-left: 46rpx;
}

.sheet-title {
  height: 57px;
  border-bottom: 1px solid #8EDCD6;
}

.sheet-title-btn {
  padding: 12px;
  font-size: 16px;
  color: #666666;
}

.sheet-item {
  height: 85px;
  margin: 0px 12px;
  font-size: 16px;
  color: #333333;
  padding: 0px 12px;
}

.sheet-item-select {
  width: 21px;
  height: 21px;
  border: 1px solid #9FA7AD;
  border-radius: 50%;
}
</style>
